<template>
    <div class="edit" v-if="show">

        <div id="edit" :class="edit_class">

            <!--S标题-->
            <h2>
                <span v-if="form_id">编辑表单</span>
                <span v-else>添加表单</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S添加表单组件-->
            <select-form @confirm="pushForm">
            </select-form>
            <!--E添加表单组件-->

            <!--S表单名字-->
            <div id="form-name">
                <cube-input
                        v-model="form_name"
                        placeholder="请输入表单名字">
                </cube-input>
            </div>
            <!--E表单名字-->

            <!--S输入的表单-->
            <div id="form" v-if="form_data.length > 0">
                <cube-scroll ref="scroll">
                    <h3>表单内容</h3>
                    <div v-for="(item,index) in form_data"
                                                 :key="index"
                                                 class="children">
                        <cube-input
                                class="input"
                                v-if="item.type === 'text' || item.type === 'textarea' || item.type === 'phone' || item.type === 'area'"
                                :value="item.label">
                            <template v-slot:append>
                                <i class="cubeic-close icon" @click="removeForm(index)"></i>
                            </template>
                        </cube-input>
                        <custom-select
                                v-if="item.type === 'radio' || item.type === 'select'"
                                :name="item.label"
                                :type="item.type"
                                :index="index"
                                :value="item.options"
                                @remove="removeForm(index)"
                                @change="selectChange"
                        >
                        </custom-select>
                    </div>
                    <cube-button
                            class="submit-button"
                            :disabled = "requesting"
                            @click="submit"
                    >
                        确认
                    </cube-button>
                </cube-scroll>
            </div>
            <!--E输入的表单-->

        </div>

    </div>
</template>

<script>
import SelectForm from "./components/select-form"
import CustomSelect from "./components/custom-select";
export default {
    name: "edit",
    data() {
        return {
            // id 编辑区域class，控制打开关闭的动画
            edit_class: "close",
            form_name: '',
            // 表单
            form_data: [],
            // 是否正在请求
            requesting: false
        }
    },
    components: {
        SelectForm,
        CustomSelect
    },
    props: {
        // 区域显示状态
        show: {
            type: Boolean,
            default: false
        },
        // 万能表单id
        form_id: {
            type: Number,
            default: 0
        }
    },
    watch: {
        // 显示状态改变
        show() {
            this.toggle()
        }
    },
    computed: {
      data () {
          return {
              form_name: this.form_name.trim(),
              form_data: this.form_data
          }
      }
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.show) {
                if(this.form_id) {
                    this.getData()
                }
                setTimeout(() => {
                    this.edit_class = 'open'
                }, 100)
            } else {
                this.form_name = ''
                this.form_data = []
                this.edit_class = 'close'
            }
        },
        /**
         * 获取数据
         */
        getData() {
            this.$sendGet('form/' + this.form_id)
                .then((res) => {
                    let data = res.data.data
                    this.form_name = data.form_name
                    this.form_data = data.form_data
                    this.$refs.scroll && this.$refs.scroll.refresh()
                })
        },
        /**
         * 插入表单组件
         * @param data
         */
        pushForm(data){
            this.$refs.scroll && this.$refs.scroll.refresh()
            this.form_data.push(data)
        },
        /**
         * 移除表单组件
         * @param index
         */
        removeForm(index){
            this.$refs.scroll && this.$refs.scroll.refresh()
            this.form_data.splice(index,1)
        },
        /**
         * 单选或者多选选择项改变
         * @param ev
         */
        selectChange(ev) {
            this.$refs.scroll && this.$refs.scroll.refresh()
            this.form_data[ev.index].options = ev.options
        },
        /**
         * 提交
         */
        submit() {
            if(!this.checkSubmit()) return;
            this.requesting = true
            let { form_name, form_data } = this.data
            this.$put('form/' + this.form_id,{
                form_name,
                form_data
            })
                .then((res) => {
                    this.requesting = false
                    this.$emit("success",res.data.data)
                    this.$createToast({
                        txt: '操作成功',
                        time: 1000,
                        type: 'correct',
                        zIndex: 10000
                    }).show()
                })
                .catch(() => {
                    this.requesting = false
                    this.$createToast({
                        txt: '操作失败',
                        time: 1000,
                        type: 'error',
                        zIndex: 10000
                    }).show()
                })
        },
        /**
         * 提交验证
         */
        checkSubmit() {
            if(this.data.form_name === '') {
                this.$createToast({
                    txt: '请输入表单名字',
                    time: 1000,
                    type: 'error',
                    zIndex: 1000
                }).show()
                return false;
            }
            if(this.data.form_data.length <= 0) {
                this.$createToast({
                    txt: '表单内容不能为空',
                    time: 1000,
                    type: 'error',
                    zIndex: 1000
                }).show()
                return false;
            }
            for(let i=0;i<this.data.form_data.length;i++) {
                let item = this.data.form_data[i]
                if(item.type === 'radio' || item.type === 'select') {
                    if(!item.options || item.options.length < 2) {
                        this.$createToast({
                            txt: '单选多选组件选项数量不能小于2个',
                            time: 1000,
                            type: 'error',
                            zIndex: 1000
                        }).show()
                        return false
                    }
                }
            }
            return true;
        }
    }
}
</script>

<style scoped lang="less" src="./edit.less"></style>
